<template>
  <h3>watchEffect的使用</h3>
  <p>数字:{{ num }}</p>
  <p>车的价格是:{{ user.car.price }}</p>
  <button @click="num++">修改数字</button>
  <button @click="user.car.price++">修改车的价格</button>
</template>

<script>
import { ref, reactive, watchEffect } from "vue"
export default {
  name: "HelloWorld",

  setup() {
    let num = ref(10)
    const user = reactive({
      name: "rose",
      age: 20,
      car: {
        brand: "奥拓",
        price: 20000,
      },
    })
    watchEffect(() => {
      // 我们可以将带监视的数据都放在这里,可以放多项,只用有一个发生变化,就会执行里面的代码.默认开启深度监视

      console.log("数据值变化了...")
      // num.value
      // user.car.price
    })
    return {
      num,
      user,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
